<template>
  <div class="container">
    <van-tabs v-model:active="activeName" @click-tab="onClickTab">
      <van-tab title="航道概况" name="航道概况"></van-tab>
      <van-tab title="航标概况" name="航标概况"></van-tab>
      <van-tab title="智慧船闸" name="智慧船闸"></van-tab>
      <van-tab title="船舶概览" name="船舶概览"></van-tab>
      <van-tab title="桥梁净高监测" name="桥梁净高监测"></van-tab>
      <van-tab title="水位监测" name="水位监测"></van-tab>
      <van-tab title="视频监控" name="视频监控"></van-tab>
    </van-tabs>
    <router-view />
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import { useRouter } from "vue-router";
  const router = useRouter();
  const activeName = ref('航道概况');

  const onClickTab = (tab) => {
    if(tab.name === '航道概况'){
       router.push({
        path: "/waterwayGeneralization",
      });
    }else if(tab.name === '航标概况'){
      router.push({
        path: "/navigationMark",
      });
    }else if(tab.name === '智慧船闸'){
      router.push({
        path: "/wisdomShiplock",
      });
    }else if(tab.name === '船舶概览'){
      router.push({
        path: "/shipSurvey",
      });
    }else if(tab.name === '桥梁净高监测'){
      router.push({
        path: "/bridgeHeight",
      });
    }else if(tab.name === '水位监测'){
      router.push({
        path: "/waterLevel",
      });
    }else if(tab.name === '视频监控'){
      router.push({
        path: "/videoSurveillance",
      });
    }  
  };
</script>

<style lang="scss" scoped>

</style>